import { Box, MenuItem } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { useGetThemeStateStore } from 'stores/theme';

import { useStyles } from '../dialogs/UIs/styled-mui-dialog';
import { GfsInputSelectBase } from '../forms';

interface Props {
    pagingOptions?: number[];
    onClickApply: Function;
    value?: number;
}

const DEFAULT_OPTIONS = [10, 25, 50];

export const Paging = ({ pagingOptions = DEFAULT_OPTIONS, value, onClickApply }: Props) => {
    const style = useStyles();
    const [pagingValue, setPagingValue] = useState<number>();
    const {mode,isLight,setMode,color1,bgColor,bgColor1,bgColor0,txtColor,txtColor3} = useGetThemeStateStore();

    useEffect(() => {
        if (value) {
            setPagingValue(value);
        } else if (pagingOptions?.length > 0) {
            setPagingValue(pagingOptions[0]);
        }
    }, [value, pagingOptions]);

    const onChangePaging = (event) => {
        const value = event.target.value;
        if (value) {
            setPagingValue(value);
            onClickApply(value);
        }
    };

    return (
        <Box>
            <GfsInputSelectBase
                value={pagingValue || ''}
                onChange={onChangePaging}
                sx={{
                    background:bgColor+' !important',
                    '& .MuiInputBase-input':{
                        background:bgColor+' !important',
                        color:txtColor+' !important',
                    },
                    '& .MuiSvgIcon-root':{
                        fill:txtColor+' !important',
                    },
                    '& .MuiSelect-select': {
                        height: '40px !important',
                        padding: '12px 30px 2px 15px',
                        fontFamily: 'Rubik !important',
                        fontWeight: '400 !important',
                        fontSize: '12px !important',
                        lineHeight: '130% !important',
                    }
                }}
            >
                {pagingOptions.map((option: number) => (
                    <MenuItem key={option} value={option} className={style.menuItem} >
                        {`${option} rows/page`}
                    </MenuItem>
                ))}
            </GfsInputSelectBase>
        </Box>
    );
};
